<template>
	<view class="mainbgc">
		<backtop ref="backtops"></backtop>
		<view class="content">
			<!-- 搜索框 -->
			<view class="ss flexleft">
				<image src="@/static/images/sy_slices/search.png" mode="" class="search"></image>
				<input type="text" placeholder="请输入搜索内容" class="inp" v-model="keywords" confirm-type="search"
					@confirm="init">
			</view>
			<!-- 轮播图 -->
			<view class="margin_top">
				<u-swiper :list="list1" height="150" keyName="image_text" @change="e => currentNum = e.current"
					@click="jumprul(list1,currentNum)" circular></u-swiper>
			</view>
			<!--  -->
			<u-tabs :list="tabslist" @click="onClick"></u-tabs>
			<scroll-view class="scroll-view_H margin_top" scroll-x="true">
				<view :class="item.id==tabchildid?'supply_xqs margin_right1':'supply_xq margin_right1'"
					v-for="item in tabchild" :key="item.id" @click="changechildid(item.id)">{{item.name}}</view>
			</scroll-view>
			<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
				<view class="placeimage"></view>
			</view>
			<view class="" v-if="list.data.length">
				<view class="center relative" @click="look(item.id)" v-for="item in list.data" :key="item.id">
					<view class="yxlable" v-show="item.yx_type==1">优选</view>
					<view class="flexbetween bottomline">
						<view class="">{{item.nickname_text}}</view>
						<view class="">{{item.createtime_text}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view style="flex: 3.4;" class="margin_right">
							<view class="lianghang titletext">{{item.title}}</view>
							<view class="flexleft flex_wrap huitext" style="margin-top: 10rpx;">
								<view class="margin_right1">阅读{{item.views}}</view>
								<view class="margin_right1">点赞{{item.dz_num}}</view>
								<view class="margin_right1">收藏{{item.collect_num}}</view>
								<view class="margin_right1">分享{{item.share_num}}</view>
							</view>
						</view>
						<view class="rightimg" style="flex: 1;">
							<image :src="item.images_text[0]" mode=""></image>
						</view>
					</view>
					<!-- <view class="flexbetween flex_wrap">
						<view class="flexleft">
							<view class="image_ya">
								<image :src="item.avatar_text" mode=""></image>
							</view>
							<view class="center_zi">
								<view class="name">{{item.nickname_text}}</view>
								<view class="hui">{{item.createtime_text}}</view>
							</view>
						</view>
					</view>
					<view class="hei center_shuju">{{item.title}}</view>
					<view class="flexleft margin_top flex_wrap">
						<view class="item_image_box flexcenter" v-for="ite in item.images_text">
							<view class="item_image">
								<image :src="ite" mode=""></image>
							</view>
						</view>
					</view> -->
				</view>
				<view class="footertextdaodi">老板！到底没数据了！</view>
			</view>

		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currentNum: 0,
				list1: [],
				current: 0,
				tabslist: [],
				tabchild: [],
				tabchildid: 0, //二级分类id
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keywords: "",
			}
		},
		onLoad() {
			this.gethyfllist() //行业分类列表
			this.getlbt()
		},
		onPageScroll(res) {
			if (res.scrollTop > 700) {
				this.$refs.backtops.isshow = true
			} else {
				this.$refs.backtops.isshow = false
			}
		},
		methods: {
			getlbt() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 19,
					is_more: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.list1 = res.data
					}
				})
			},
			jumprul(item, index) {
				let i = []
				item.forEach(items => {
					i.push(items.image_text)
				}) //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
				if (item.url == "") {
					return false
				}
				uni.navigateTo({
					url: item.url
				})
			},
			gethyfllist() {
				httpRequest.request('/api/info/infoItem', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.childs.unshift({
								id: item.id,
								name: "全部"
							})
						})
						this.tabslist = res.data
						// this.tabchild = res.data[0].childs

						this.tabslist.unshift({
							id: 0,
							name: "全部",
							childs: []
						})
						// this.tabchildid = res.data[0].childs[0].id
						this.init()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			look(id) {
				uni.navigateTo({
					url: '/pages/index/zixunxq?id=' + id,
				})
			},
			onClick(e) { //顶部
				this.current = e.index;
				this.tabchild = e.childs
				if (e.childs.length) {
					this.tabchildid = e.childs[0].id
				} else {
					this.tabchildid = e.id
				}

				this.init();
			},
			changechildid(id) {
				this.tabchildid = id
				this.init()
			},
			// 获取行业咨询列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/info/index', 'GET', {
					page: page || 1,
					limit: _this.limit,
					keywords: this.keywords,
					info_item_id: this.tabchildid,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}

				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huitext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.rightimg {
		width: 130rpx;
		height: 130rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.bottomline {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, .1);
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.item_image_box {
		width: 25%;
	}

	.item_image {
		width: 144rpx;
		height: 144rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		padding: 30rpx 25rpx 0rpx 25rpx;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
	}

	.scroll-view_H {
		white-space: nowrap
	}

	.supply_xq {
		display: inline-block;
		padding: 9rpx 35rpx 10rpx 35rpx;
		background: RGBA(239, 239, 239, 1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333;
	}

	.supply_xqs {
		display: inline-block;
		padding: 9rpx 35rpx 10rpx 35rpx;
		background: rgba(34, 141, 255, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.ss {
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 18rpx 20rpx 18rpx 60rpx;
	}

	.inp {
		background-color: #f3f3f3;
		width: 500rpx;
		padding: 0rpx 0rpx 0rpx 30rpx;
	}

	input:input-placeholder {
		font-size: 24rpx;
	}

	// 
	.name {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.center_zi {
		padding: 0rpx 20rpx;
	}

	.hei {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		margin: 20rpx 0rpx;
	}

	.center {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx 30rpx;

	}

	.center_shuju {
		width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.flexshrink {
		flex-shrink: 0;
	}
</style>